<template>
  <div>
    <!-- 轮播 -->
    <div class="swipe">
      <van-swipe autoplay="5000" :loop="true" indicator-color="white">
        <van-swipe-item>
          <img style="width: 100%" src="../assets/images/home/banner.jpg" />
          <div class="text">
            <div class="text_title">商超零售</div>
            <text>
              中兴旗下两家大型连锁商超扎根南沙30载，坐落于滨海风景区核心地段，依托得天独厚的地理优势与诚信经营理念，已发展成为辐射周边20万居民的一站式生活中心。以生鲜直采、便民服务与本土特产专区为特色，连续十年荣获“南沙百姓信赖商超”称号，日均服务客流量超5000人次，见证三代人的生活记忆。
            </text>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <img style="width: 100%" src="../assets/images/home/banner.jpg" />
          <div class="text">
            <div class="text_title">商超零售</div>
            <text>
              中兴旗下两家大型连锁商超扎根南沙30载，坐落于滨海风景区核心地段，依托得天独厚的地理优势与诚信经营理念，已发展成为辐射周边20万居民的一站式生活中心。以生鲜直采、便民服务与本土特产专区为特色，连续十年荣获“南沙百姓信赖商超”称号，日均服务客流量超5000人次，见证三代人的生活记忆。
            </text>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <img style="width: 100%" src="../assets/images/home/banner.jpg" />
          <div class="text">
            <div class="text_title">商超零售</div>
            <text>
              中兴旗下两家大型连锁商超扎根南沙30载，坐落于滨海风景区核心地段，依托得天独厚的地理优势与诚信经营理念，已发展成为辐射周边20万居民的一站式生活中心。以生鲜直采、便民服务与本土特产专区为特色，连续十年荣获“南沙百姓信赖商超”称号，日均服务客流量超5000人次，见证三代人的生活记忆。
            </text>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <img style="width: 100%" src="../assets/images/home/banner.jpg" />
          <div class="text">
            <div class="text_title">商超零售</div>
            <text>
              中兴旗下两家大型连锁商超扎根南沙30载，坐落于滨海风景区核心地段，依托得天独厚的地理优势与诚信经营理念，已发展成为辐射周边20万居民的一站式生活中心。以生鲜直采、便民服务与本土特产专区为特色，连续十年荣获“南沙百姓信赖商超”称号，日均服务客流量超5000人次，见证三代人的生活记忆。
            </text>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 主体 -->
    <div class="main">
      <!-- 业务导航 -->
      <div class="nav_title">业务导航</div>
      <div class="nav_list flex-col">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="item_title">
            <van-image
              class="icon"
              fit="contain"
              src="../src/assets/images/home/Frame25@2x.png"
            />
            {{ item.name }}
            <van-image
              class="icon"
              fit="contain"
              src="../src/assets/images/home/Frame25@2x.png"
            />
          </div>
          <div class="item_label">
            <span>{{ item.label }}</span>
          </div>
          <img style="width: 100%" :src="item.img" />
          <div class="text">
            <text>{{ item.text }}</text>
          </div>
          <div class="outer">了解更多→</div>
        </div>
      </div>
      <!-- 数据墙 -->
      <div style="background:#EB3C03">
        <van-image
          style="width: 100%"
          fit="contain"
          src="../src/assets/images/home/shujuqiang.png"
        />
      </div>
    </div>
    
  </div>
</template>
<script setup>
import { reactive } from "vue";
const list = reactive([
  {
    name: "商超零售",
    label: "民生服务典范",
    img: "../src/assets/images/home/nav01@2x.jpg",
    text: "中兴旗下两家大型连锁商超扎根南沙30载，坐落于滨海风景区核心地段，依托得天独厚的地理优势与诚信经营理念，已发展成为辐射周边20万居民的一站式生活中心。以生鲜直采、便民服务与本土特产专区为特色，连续十年荣获“南沙百姓信赖商超”称号，日均服务客流量超5000人次，见证三代人的生活记忆。",
  },
  {
    name: "物业租赁",
    label: "全业态资产管家",
    img: "../src/assets/images/home/nav02@2x.jpg",
    text: "中兴贸易整合超100万㎡优质物业资源，涵盖：智造厂房、物流仓库、黄金铺面、甲级写字楼。30年专业运营团队提供选址评估、改造咨询、法务支持等全周期服务，累计服务超500家企业客户，空置率长期低于行业平均水平15%。欢迎联系获取定制化租赁方案。",
  },
  {
    name: "车辆设备",
    label: "重型装备一站式解决方案",
    img: "../src/assets/images/home/nav03@2x.jpg",
    text: "中兴贸易拥有200+台专业设备矩阵，覆盖工程全场景需求，有工程机（械土方系列、起重运输、特种作业）运输车队（普货运输、特种运输），灵活租售模式（长租/短租/以租代购），累计为粤港澳大湾区300+工程项目提供设备支持，年均出勤率达95%，助力客户降本增效！",
  },
  {
    name: "运输队",
    label: "全场景运力保障专家",
    img: "../src/assets/images/home/nav04@2x.jpg",
    text: '中兴贸易组建80+台标准化运输车队，配备主力车型（普货运输、特种运输、工程协同、道路救援）覆盖珠三角200+条干线运输网络，提供零担或整车运输、 设备联动作业、紧急故障车辆拖移服务。累计安全行驶里程超500万公里，获评"广东省四星级货运企业"，24小时调度热线保障，让货物安全准时抵达每一程。',
  },
]);
</script>
<style lang="less" scoped>
@import "@/assets/css/common.css";
.swipe {
  width: 100%;
  .van-swipe-item {
    height: 600px;
  }
  .text {
    background: #e73c03;
    border-top-left-radius: 3rem;
    padding: 1.6em;
    color: #ffffffb6;
    font-size: 15px;
    transform: translate(0, -4.1em);
    .text_title {
      height: 2.5em;
      line-height: 2em;
      font-size: 18px;
      font-weight: 600;
    }
    text {
      line-height: 28px;
    }
  }
}

//业务导航
.main {
  .nav_title {
    height: 80px;
    line-height: 80px;
    font-size: 28px;
    text-align: center;
  }
  .nav_list {
    padding: 0 20px;
    .item {
      text-align: center;
      border-radius: 12px;
      padding: 20px;
      background: #fff1ed;
      margin-bottom: 20px;
      .item_title {
        font-size: 24px;
        .content {
          display: inline-block;
        }
        .icon {
          background: #fff1ed;
          width: 60px;
          transform: translate(0, 12px);
        }
      }
      .item_label {
        margin-bottom: 18px;
        margin-top: 4px;
        span {
          padding: 1px 15px;
          border-radius: 10px;
          font-size: 14px;
          background: #eb3c03;
          color: #fff1ed;
        }
      }
      .text {
        height: 200px;
        overflow: hidden;
        margin-top: 10px;
        font-size: 15px;
        color: #333333;
        text-align: start;
        text {
          line-height: 1.8;
        }
      }
      .outer {
        height: 40px;
        line-height: 40px;
        text-align: end;
        font-size: 13px;
        font-weight: bold;
        color: #eb3c03;
      }
    }
  }
}

</style>